<template>
	<div class="guess-dia-out" v-show="value">
		<div class="mask"></div>
		<!-- <div class="lh-title t-c">{{title}}</div> -->
		<div class="guess-dia-content" ref="ceshi">
			<div class="close-btn" @click="closeGusee()"><img src="@/assets/close.png" /></div>
			<div style="height:100%;" class="guess-dia-content-inner guess-dia-content-inner-special">
				<slot></slot>
			</div>
		</div>
	</div>
</template>
<script>
	
	export default{
		props:{
			value:{
				type:Boolean,
				default:false
			},
		},
		
		watch:{
			value(value){
				/*if (value) {
					this.$nextTick(()=>{
						console.log(this.$refs.ceshi.clientHeight);
					})
				}*/
				this.$emit('input', value);
			}
		},
		methods:{
			
			closeGusee(){
				this.$emit('input', false);
			}
		}
	}
</script>
<style scoped lang="scss">
	@import '@/css/base.scss';
	.mask{
		position: fixed;
    	z-index: 1000;
    	top: 0;
    	right: 0;
    	left: 0;
    	bottom: 0;
    	background: rgba(0, 0, 0, 0.6);
    }
	/*立即竞猜 对话框*/
    .close-btn{position: absolute;z-index: 1112;top: 100px;right:20px;width: 40px;height: 40px;line-height: 40px;text-align: center;}
    .close-btn img{width: 30px;height: 30px;}
    .guess-dia-content{position: fixed;left:30px ;bottom: 0;width: 690px;height: 90%;background: #FFF;z-index: 1001;box-shadow: 0 28px 40px 0 rgba(199,199,199,0.25);border-top-left-radius: 16px;border-top-right-radius: 16px;}
    .guess-dia-content .guess-dia-content-inner{padding-top: 74px;box-sizing:border-box;}


</style>
<style>
	.guess-dia-content-inner-special>div{height: 100%;min-height: 100%;}
    .guess-dia-content-inner-special .tab-content-out{  height: 100%;min-height: 100%; overflow: auto;-webkit-overflow-scrolling: touch;}
    .guess-dia-content-inner-special .tab-content-out>div{ min-height: inherit;}
</style>